{layout name="layout" /}

<script type="text/javascript" charset="utf-8" src="__JS__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__JS__/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="__JS__/ueditor/lang/zh-cn/zh-cn.js"></script>

<div class="form-container">
    <h2>增加商品</h2>
    
    <form id='form1' name='form1' method='post' action='productNewCheck'>
        <div class="form-group">
            <label for="pClassId">商品类别</label>
            <select id="pClassId" name="pClassId" class="form-control" required>
                <option value="">请选择...</option>
                {foreach name="classes" item="class"}        
                    <option value='{$class["cId"]}'>{$class["cName"]}</option>       
                {/foreach}
            </select>
        </div>
        
        <div class="form-group">
            <label for="pName">商品名</label>
            <input name="pName" type="text" id="pName" class="form-control" required />
        </div>
        
        <div class="form-group">
            <label for="pPrice">商品价格</label>
            <input name="pPrice" type="text" id="pPrice" class="form-control" required number="true" />
        </div>
        
        <div class="form-group">
            <label for="pImg">商品图片</label>
            <div class="image-selector">
                <select name='pImg' id='pImg' class="form-control" required>
                    <option value="">请选择图片</option>
                    {foreach name="files" item="data"}
                        {if condition="($data!='.') and ($data!='..') "}
                            <option value='{$data}'>{$data}</option>
                        {/if}
                    {/foreach} 
                </select>
                <div class="image-preview">
                    <img id='img1' name='img1' src='#' alt="图片预览" style="display:none;" />
                    <span id="no-image">无图片</span>
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <label for="pDescr">商品简介</label>
            <textarea name="pDescr" id="pDescr" class="form-control" rows="3" required></textarea>
        </div>
        
        <div class="form-group">
            <label for="pDescrDetail">商品详情</label>
            <script id="pDescrDetail" name="pDescrDetail" type="text/plain" style="width:100%;height:300px;"></script>
        </div>
        
        <div class="form-group">
            <input type="submit" class="btn btn-submit" value="增加商品" onclick="return confirm('确定要增加吗？');" />
        </div>
    </form>
</div>

<script type="text/javascript">
    // 实例化编辑器
    var ue = UE.getEditor('pDescrDetail');
    
    // 图片选择变化事件
    document.getElementById("pImg").addEventListener("change", function(){
        var img = document.getElementById("img1");
        var noImage = document.getElementById("no-image");
        
        if(this.value) {
            img.src = "../../../static/upload/" + this.value;
            img.style.display = "block";
            noImage.style.display = "none";
        } else {
            img.style.display = "none";
            noImage.style.display = "block";
        }
    });
</script>